<template>
  <div class="orderList">
    <!-- 空页面 -->
    <div class="empty" v-if="isEmpty" style="height: 100%">
      <img src="@/assets/img/order/none_login.png" alt />
      <!-- 当前订单 -->
      <div class="desc" v-if="type == 'current'">
        <span>您今天还没有下单</span><br />
        <span>快去选择一杯喜欢的茶吧</span>
      </div>
      <!-- 历史订单 -->
      <div class="desc" v-else>
        <span>您还没有下单</span><br />
        <span>快去选一件心仪的商品吧</span>
      </div>
      <div
        class="btn"
        v-if="type == 'current'"
        @click="$router.push({ name: 'commodity', params: {} })"
      >
        去点单
      </div>
    </div>
    <!-- 非空页面 -->
    <div class="unempty" v-else style="height: 100%">
      <!-- 当前订单 -->
      <div v-if="type == 'current'">
        <div style="margin-bottom : 1rem;" v-for="(currentOrder, index) in currentOrderList" :key="index">
          <div class="orderProgress" v-if="currentOrder.isTakeSelf == 1">
            <div class="title">订单进行中</div>
            <van-steps
              class="orderSteps"
              :active="active"
              active-color="#dba871"
            >
              <van-step>买家下单</van-step>
              <van-step>商家接单</van-step>
              <van-step>正在制作</van-step>
              <van-step>制作完成</van-step>
            </van-steps>
            <div class="number font16">取餐号</div>
            <div class="number font48">Z004</div>
            <div class="waiting">
              <div class="item" style="border-right: 1px solid #818181">
                <div><span class="font36h">0</span>位</div>
                <div>前方等待人数</div>
              </div>
              <div class="item">
                <div>
                  <span class="font24g">≥</span
                  ><span class="font36h">0.5</span>分钟
                </div>
                <div>预计等待时常</div>
              </div>
            </div>
          </div>
          <div class="orderProgress" v-else>
            <div class="title">订单进行中</div>
            <van-steps
              class="orderSteps"
              :active="active"
              active-color="#dba871"
            >
              <van-step>买家下单</van-step>
              <van-step>商家接单</van-step>
              <van-step>正在制作</van-step>
              <van-step>制作完成</van-step>
              <van-step>骑手接单</van-step>
              <van-step>已送达</van-step>
            </van-steps>
            <div class="number font16">骑手电话</div>
            <div class="number font16">178156180517</div>
            <div class="waiting">
              <div class="item" style="border-right: 1px solid #818181">
                <div><span class="font36h">0</span>位</div>
                <div>前方等待人数</div>
              </div>
              <div class="item">
                <div>
                  <span class="font24g">≥</span
                  ><span class="font36h">0.5</span>分钟
                </div>
                <div>预计等待时常</div>
              </div>
            </div>
          </div>
          <CurrentOrder :currentOrder="currentOrder"> </CurrentOrder>
        </div>
      </div>
      <!-- 历史订单 -->
      <HistoryOrder v-else> </HistoryOrder>
    </div>
  </div>
</template>

<script>
import orderApi from "@/api/order";
import Vue from "vue";
import { Step, Steps } from "vant";

Vue.use(Step).use(Steps);

import CurrentOrder from "../../components/order/CurrentOrder";
import HistoryOrder from "../../components/order/HistoryOrder";
export default {
  name: "orderList",
  props: {
    type: String,
  },
  components: {
    CurrentOrder,
    HistoryOrder,
  },
  data() {
    return {
      active: 2,
      isEmpty: false,
      currentOrderList: [],
    };
  },
  mounted() {
    this.getCurrentOrders();
  },
  computed: {
    storeInfo() {
      return this.$store.getters.storeInfo;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  methods: {
    getCurrentOrders() {
      var formData = new FormData();
      formData.append("userId", this.userInfo.userId);
      formData.append("state", 0);
      orderApi.getCurrentOrders(formData).then((response) => {
        console.log("getCurrentOrders", response.data.data);
        this.currentOrderList = response.data.data
        if(response.data.data.length == 0) {
          this.isEmpty = true
        } else {
          this.isEmpty = false
        }
      });
    },
  },
};
</script>

<style scoped>
.orderList {
  background-color: #f2f2f2;
  height: 100%;
  overflow: scroll;
}
.orderList .empty img {
  width: 5rem;
  height: 5rem;
  margin: 25% 0 1rem 2.5rem;
  background-color: #f2f2f2;
}
.orderList .empty .desc {
  text-align: center;
  color: #646566;
  font-size: 13px;
}
.orderList .empty .btn {
  color: white;
  background-color: #dba871;
  width: 50%;
  height: 1rem;
  border-radius: 2.5px;
  line-height: 1rem;
  text-align: center;
  margin: 1rem 0 0 2.5rem;
}
.orderProgress {
  min-height: 3rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0.3rem 0.5rem 0 0.5rem;
  border-radius: 10px;
}
.orderProgress .title {
  font-size: 18px;
  margin: 0.5rem 0 0.15rem 0;
}
.orderProgress .number {
  color: #333;
  margin-bottom: 0.2rem;
}
.orderProgress .waiting {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 1rem;
  border-top: 1px solid #c1c1c1;
  margin: 0 0.5rem;
}
.orderProgress .waiting .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: gray;
  width: 4rem;
  margin: 1rem 0;
  font-size: 16px;
}
.orderProgress .waiting .item div {
  margin: 0.1rem 0;
}
/* 步骤条 */
::v-deep .van-step--finish .van-step__circle,
.van-step--finish .van-step__line {
  background-color: #dba871;
}
::v-deep .van-step--horizontal .van-step__title {
  font-size: 13px;
}
.orderSteps {
  width: 94%;
  text-align: left;
  /* font-size: 14px; */
}
</style>